<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div{
	font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;font-size:12px;background:#fff;margin:1px;float:left;display:block;
}
div:hover{
	background:#CFF;
}

</style>


</head>


<body>
<script src="processing-1.3.6.min.js"></script>
<script type="application/processing" data-processing-target="canvas1">

PImage bigImage;
String image_str = "";
int bs = 3; // this is our dot radius
float[] bx = new float[10];
float[] by = new float[10];

void setup() 
{
  for (int i=0; i<10; i++) { 
  	bx[i] = 0.0;
  	by[i] = 0.0;
  }
  bigImage = requestImage(cur_image);
  image_str = cur_image;
  size(352, 240);

  ellipseMode(CENTER_RADIUS);  
}
void draw() 
{ 
  updateSelf();
	//background(background_image);
  if (bigImage.width == 0) {
    // Image is not yet loaded
  } else if (bigImage.width == -1) {
    // This means an error occurred during image loading
  } else {
    // Image is ready to go, draw it
    background(bigImage);
  }
  //we'll draw dots on the coordinates passed in from our javascript

  	for (i=0; i<10;i++) {
		if(coordx[i]>0) {
			stroke(255);
			//colorMode(RGB,255);
			fill(255 - i*20,i*100%255,i*30%255);
			ellipse(coordx[i], coordy[i], bs, bs);
		}
	}

}
void updateSelf()
{
	String new_image_str = cur_image;
	if (new_image_str != image_str) {
		background(200);
		bigImage = requestImage(cur_image);
		image_str = cur_image;
		/*
		for (int i=0; i<10; i++) {
			bx[i] = coordx[i];
			by[i] = coordy[i];
		}
		*/
	}
}
</script>


<script language="Javascript">
var last_clicked = "";
var cur_image = "http://amosweb.cse.wustl.edu/image/984/20091026_143750.jpg";
var coordx = new Array();
var coordy = new Array();

function plot(args) {
	args_array = args.split(" ");
	document.getElementById(args_array[0]).style.background = "#CFF";
	if (last_clicked != "") {
		document.getElementById(last_clicked).style.background = "#FFF";
	}
	last_clicked = args_array[0];
	cur_image = "http://amosweb.cse.wustl.edu/image/984/".concat(last_clicked);
	/*
	coordx = new Array();
	coordy = new Array();
	for (i=0;i<(args_array.length-1);i++) {
		this_coord = args_array[i+1].split(",");
		coordx[i] = this_coord[0];
		coordy[i] = this_coord[1];
	}*/
	document.getElementById("coord_text").innerHTML = args; 
	/*
	for (i=0;i<coordx.length;i++) {
		document.getElementById("coord_text").innerHTML += " " + coordx[i] + "," + coordy[i];
	}*/
	
function loading() {
	document.getElementById("loading").style.visibility = "visible";
}

function notloading() {
	document.getElementById("loading").style.visibility = "hidden";
}

}
</script>

<canvas id="canvas1"> </canvas><p id="coord_text"></p>

<br />
<div id="listing"></div>
</body></html>
